<template>
    <div id="app">
        <div class="amap-wrapper" :style="'height:' + height + 'px'">
            <el-amap
                class="amap-box"
                :animateEnable="false"
                :plugin="plugin"
                :center="center"
                :zoom="zoom"
                :vid="'amap-vue'"
                :events="events"
            >
                <district-explorer
                    @featureChange="change"
                    :center="center"
                    :zoom="zoom"
                    ref="districtExplorer"
                ></district-explorer>
                <custom-marker-cluster
                    v-for="(diocese, index) in current_list"
                    :key="index + diocese.title"
                    :markerList="diocese.parishlist"
                    :renderCluserMarker="contentRender"
                    :markerContent="markerContent"
                    :extData="diocese"
                    @oneMarkerClick="oneMarkerClick"
                ></custom-marker-cluster>
                <el-amap-info-window
                    :position="currentWindow.position"
                    :content="currentWindow.content"
                    :visible="currentWindow.visible"
                    :events="currentWindow.events"
                >
                </el-amap-info-window>
            </el-amap>
        </div>
    </div>
</template>
<script>
import { DistrictExplorer } from "./district-explorer.js";
import { customMarkerCluster } from "../../../amapplugin/custom-marker-cluster.js";
import childmarker from "../../../amapplugin/components/children/marker";
import childMarkerClustre from "../../../amapplugin/components/children/marker-cluster";
import { getDioceseListHasParish } from "../../../api/home/diocese";
import infoWindow from "../../../amapplugin/components/children/info-window"
import Vue from 'vue';
export default {
    name: "index",
    data: () => {
        return {
            reset: false,
            height: 500,
            zoom: 3,
            center: [105.93879, 37.535061],
            plugin: [
                {
                    pName: "ToolBar",
                    position: {
                        top: "10px",
                        right: "10px"
                    }
                }
            ],
            all_list: {},
            current_list: [],
            info_window: {},
            currentWindow: {
                position: [105.93879, 37.535061],
                events: {},
                content: "11111111",
                visible: false
            },
            markerContent: (h, extData) => {
                return h(childmarker, {
                    props: { extData }
                });
            },
            contentRender: (h, extData, context) => {
                return h(childMarkerClustre, {
                    props: { context, extData }
                });
            }
        };
    },
    created() {
        this.height = document.documentElement.clientHeight - 20;
        let width = document.body.clientWidth;
        switch (true) {
            case width >= 1200:
                this.zoom = 4.4;
                break;
            case width >= 992:
                this.zoom = 4.3;
                break;
            case width >= 768:
                this.zoom = 4.3;
                break;
            case width >= 576:
                this.zoom = 3.3;
                break;
            default:
                this.zoom = 3;
        }
    },
    computed: {
        events() {
            let self = this;
            return {
                contextmenu: e => {
                    this.current_list = [];
                    this.$refs.districtExplorer.reload_district();
                }
            };
        }
    },
    components: {
        DistrictExplorer,
        customMarkerCluster
    },
    methods: {
        async change(adcode) {
            this.current_list = [];
            if (this.all_list[adcode]) {
                this.current_list = this.all_list[adcode];
            } else {
                let data = await getDioceseListHasParish({
                    province_adcode: adcode
                });
                if (data.status == 200 && data.data) {
                    this.all_list[adcode] = data.data;
                    this.current_list = data.data;
                }
            }
        },
        oneMarkerClick(e) {
            console.log("oneMarkerClick", e);
            console.log("extdata", e.target.getExtData());
            this.currentWindow.visible = false;
            // this.infoWindowData = e.target.getExtData()
            this.$nextTick(() => {
                // this.currentWindow.content=this.getInfoConten(e.target.getExtData());
                // this.currentWindow.position = e.target.getExtData().position;
                this.currentWindow.visible = true;
            });
        },
        getInfoConten(extData) {
            // console.log('infoWindowData',this.infoWindowData);
            let instance = new Vue({render: h => {
                return h(infoWindow,{props:{extData}});
            }})
            instance.$mount();
            return instance.$el;
            // const template = mountedRenderFnGetTemp((h, extData) => {
            //     return h(
            //         infoWindow,
            //         {
            //             style: { backgroundColor: "#fff" },
            //             props: { extData }
            //         },
            //         ["xxxxxxx"]
            //     );
            // }, extData);
            // this.currentWindow.content = template;
        }
    }
};
</script>
<style>
.amap-wrapper {
    height: 100%;
}
</style>
